<template>
  <div>
<!--    &lt;!&ndash; 打开弹窗按钮 &ndash;&gt;-->
<!--    <el-button type="primary" @click="openDialog">配置二维码</el-button>-->

    <!-- 二维码生成器弹窗 -->
    <el-dialog :append-to-body="true"
        title="二维码生成器"
        :visible.sync="dialogVisible"
        width="80%"
        top="5vh"
        custom-class="qr-generator-dialog"
        @close="closeDialog"
    >
      <div class="dialog-content">
        <!-- 左侧设置区域 (70%) -->
        <div class="settings-panel">
          <!-- 顶部选项卡 -->
          <div class="">
            <el-tabs v-model="activeTab" stretch>
              <el-tab-pane name="content" label="内容">
                <!-- 内容选项卡 -->
                <div v-show="activeTab === 'content'" class="tab-content">
<!--                  <div class="section">-->
<!--                    <div class="section-title">选择类型：</div>-->
<!--                    <div class="type-selector">-->
<!--                      <div-->
<!--                          v-for="type in contentTypes"-->
<!--                          :key="type.value"-->
<!--                          class="type-item"-->
<!--                          :class="{ active: selectedType === type.value }"-->
<!--                          @click="selectType(type.value)"-->
<!--                      >-->
<!--                        {{ type.label }}-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </div>-->

                  <!-- 网址输入区域 -->
                  <div v-show="selectedType === 'url'" class="url-input">
                    <div class="input-prepend">会议链接:</div>
                    <el-input
                        v-model="url"
                        placeholder="https:// 请输入需要生成的的网址链接(腾讯会议/其他)"
                    ></el-input>
                  </div>

<!--                  &lt;!&ndash; 微信公众号输入区域 &ndash;&gt;-->
<!--                  <div v-show="selectedType === 'wechat'" class="wechat-input">-->
<!--                    <div class="input-prepend">公众号:</div>-->
<!--                    <el-input-->
<!--                        v-model="wechatAccount"-->
<!--                        placeholder="请输入微信公众号ID"-->
<!--                    ></el-input>-->
<!--                  </div>-->

<!--                  &lt;!&ndash; 文本输入区域 &ndash;&gt;-->
<!--                  <div v-show="selectedType === 'text'" class="text-input">-->
<!--                    <el-input-->
<!--                        type="textarea"-->
<!--                        v-model="textContent"-->
<!--                        placeholder="请输入要编码的文本内容"-->
<!--                        :rows="4"-->
<!--                    ></el-input>-->
<!--                  </div>-->
                </div>
              </el-tab-pane>
              <el-tab-pane name="style" label="样式">
                <!-- 样式设置区域 -->
                <div class="settings-panel">
                  <!-- 前景设置 -->
                  <div class="setting-section">
                    <div class="section-header">
                      <i class="el-icon-brush"></i>
                      <span>前景样式</span>
                    </div>
                    <div class="options-grid">
                      <div
                          v-for="(fore, idx) in foregroundOptions"
                          :key="`fore-${idx}`"
                          class="style-option"
                          :class="{ active: selectedForeground === idx }"
                          @click="selectForeground(idx)"
                      >
                        <div
                            class="color-block"
                            :style="{ backgroundColor: fore.value }"
                        ></div>
<!--                        <div-->
<!--                            v-else-->
<!--                            class="gradient-block"-->
<!--                            :style="{ background: `linear-gradient(135deg, ${fore.from}, ${fore.to})` }"-->
<!--                        ></div>-->
                        <div class="option-label">{{ fore.label }}</div>
                      </div>
                    </div>
                  </div>

                  <!-- 背景设置 -->
                  <div class="setting-section">
                    <div class="section-header">
                      <i class="el-icon-picture-outline"></i>
                      <span>背景样式</span>
                    </div>
                    <div class="options-grid">
                      <div
                          v-for="(bg, idx) in backgroundOptions"
                          :key="`bg-${idx}`"
                          class="style-option"
                          :class="{ active: selectedBackground === idx }"
                          @click="selectBackground(idx)"
                      >
                        <div

                            class="color-block"
                            :style="{ backgroundColor: bg.value }"
                        ></div>
<!--                        <div-->
<!--                            v-else-->
<!--                            class="gradient-block"-->
<!--                            :style="{ background: `linear-gradient(135deg, ${bg.from}, ${bg.to})` }"-->
<!--                        ></div>-->
                        <div class="option-label">{{ bg.label }}</div>
                      </div>
                    </div>
                  </div>

                  <!-- Logo设置（占位） -->
                  <div class="setting-section">
                    <div class="section-header">
                      <i class="el-icon-picture"></i>
                      <span>Logo设置</span>
                    </div>
                    <div class="logo-placeholder">
                      <el-alert
                          title="Logo功能当前未启用"
                          type="info"
                          :closable="false"
                          show-icon
                      >
                      </el-alert>
                    </div>
                  </div>
                </div>


                </el-tab-pane>
              </el-tabs>



          </div>




        </div>

        <!-- 右侧预览区域 (30%) -->
        <div class="preview-panel">
          <div class="preview-title">二维码预览</div>
          <div class="qr-preview" ref="qrPreview" :style="{backgroundColor: selectedBackgroundValue}">

            <div id="qrcode" >
              <div id="qroode" class="qrconde" ref="qrCodeDiv"></div>
            </div>

          </div>
          <div class="preview-tip">建议在真实场景中扫描确认</div>
          <el-button
              type="primary"
              class="save-btn"
              @click="generateQRCode"
          >保存并使用</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import QRCode from 'qrcodejs2'
export default {
  name: 'QrGenerator',
  data() {
    return {
      // qrCodeText:'',
      // banner1: '',
      dialogVisible: false,
      activeTab: 'content', // 当前激活的选项卡
      selectedType: 'url', // 当前选中的内容类型

      // 内容数据
      url: 'https://www.baidu.com',
      wechatAccount: '',
      textContent: '',

      // 内容类型选项
      contentTypes: [
        { value: 'url', label: '网址' },
        { value: 'wechat', label: '微信公众号' },
        { value: 'text', label: '文本' }
      ],

      // 前景选项
      foregroundOptions: [
        { label: '黑色', color: '#000000' ,value: '#000000'},
        { label: '深蓝', color: '#1E3264',value: '#1E3264'},
        { label: '酒红', color: '#8D1B3D' ,value: '#8D1B3D'},
        { label: '森林绿', color: '#0D724D',value: '#0D724D' },
        // { label: '蓝紫渐变', color: 'linear-gradient(to right, #4568DC, #B06AB3)' },
        // { label: '红橙渐变', color: 'linear-gradient(to right, #FF416C, #FF4B2B)' }

      ],
      selectedForeground: 0, // 默认选中第一个前景

      // 背景选项
      backgroundOptions: [
        { label: '白色', pattern: '#FFFFFF',value: '#FFFFFF' },
        { label: '浅灰', pattern: '#F8F9FA',value: '#F8F9FA' },
        {label: '淡蓝', pattern: '#E3F2FD', value: '#E3F2FD'},
        { label: '象牙色',pattern: '#FFF8E1',value: '#FFF8E1' },
        { label: '方格', pattern: '#E0F7FA',value: '#E0F7FA' },
        { label: '点状', pattern: '#f0f2f5' ,value: '#f0f2f5'},
        { label: '条纹', pattern: '#f1f8e9',value: '#f1f8e9' }

      ],
      selectedBackground: 0, // 默认选中第一个背景

      // Logo选项
      logoOptions: [
        { label: '应用1', icon: 'el-icon-mobile-phone' },
        { label: '应用2', icon: 'el-icon-coffee-cup' },
        { label: '应用3', icon: 'el-icon-shopping-cart-2' },
        { label: '应用4', icon: 'el-icon-ice-cream-round' },
        { label: '应用5', icon: 'el-icon-present' },
        { label: '应用6', icon: 'el-icon-collection' }
      ],
      selectedLogoIndex: null // 当前选中的Logo
    };
  },

  created() {
    this.getQrCode(180,180,this.selectedForegroundValue,this.selectedBackgroundValue)
  },

  computed: {
    // 计算当前前景颜色
    selectedForegroundValue() {
      return this.foregroundOptions[this.selectedForeground].color;
    },

    // 计算当前背景颜色
    selectedBackgroundValue() {
      return this.backgroundOptions[this.selectedBackground].pattern;
    }
  },
  methods: {

    getQrCode( width, height,colorDark,colorLight) {
      console.log(colorDark, colorLight);
        this.$nextTick(() => {
          if( this.$refs.qrCodeDiv.innerHTML !=undefined){
            this.$refs.qrCodeDiv.innerHTML = "";
          }
          new QRCode(this.$refs.qrCodeDiv, {
            text: this.url,
            //text为转换为二维码的文本，可以是所有东西：图片、文本、电话、链接等等
            width: width,   //生成二维码的宽度
            height: height,   //生成二维码的高度
            colorDark: colorDark,   // 二维码颜色
            colorLight: colorLight,  //二维码背景颜色
          })
        })

    },


    createPicture(width,height) {  //二维码转为图片
      this.$nextTick(() => {
        html2canvas(this.$refs.qrCodeDiv, {     //设置图片的背景颜色、宽度、高度
          backgroundColor: null,
          useCORS: true,
          allowTaint: true,
          scale: 1,
          width: width,
          height: height
        }).then(canvas => {
          var imgData = canvas.toDataURL('image/jpeg')  //这里转为图片方式
          console.log(typeof (imgData))
          console.log("imgData",imgData)
          this.$emit("getQrCode",imgData)
        })
      })
    },
    clearQrcode() {  //清除二维码
      const codehtml = document.getElementById("qrcode");
      codehtml.innerHTML = ""
    },


    // 打开弹窗
    openDialog() {
      this.dialogVisible = true;
      this.getQrCode(180,180,this.selectedForegroundValue,this.selectedBackgroundValue)
    },

    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false;
    },

    // 选择内容类型
    selectType(type) {
      this.selectedType = type;
    },

    // 选择前景样式
    selectForeground(index) {
      this.selectedForeground = index;

      this.getQrCode(180,180,this.selectedForegroundValue,this.selectedBackgroundValue)
    },

    // 选择背景样式
    selectBackground(index) {
      this.selectedBackground = index;
      this.getQrCode(180,180,this.selectedForegroundValue,this.selectedBackgroundValue)
    },

    // 选择Logo
    selectLogo(index) {
      this.selectedLogoIndex = index;
    },

    // 生成二维码
    generateQRCode() {
      if (this.url) {
        this.$nextTick(() => {
          this.$refs.qrCodeDiv.innerHTML = "";
          new QRCode(this.$refs.qrCodeDiv, {
            text: this.url,
            //text为转换为二维码的文本，可以是所有东西：图片、文本、电话、链接等等
            width: 80,   //生成二维码的宽度
            height: 80,   //生成二维码的高度
            colorDark: this.selectedForegroundValue,   // 二维码颜色
            colorLight: this.selectedBackgroundValue,  //二维码背景颜色
          }),
              this.createPicture(80, 80)    //转换图片
        })
      } else {
        this.$notify({
          title: "温馨提示",
          type: "warning",
          message: this.$createElement("i", {style: "color:orange"}, "请填写会议地址"),
        })
      }





      // this.$message({
      //   message: '二维码已生成并保存成功！',
      //   type: 'success',
      //   duration: 2000
      // });
      this.closeDialog();
    }
  }
};
</script>

<style lang="scss" scoped>
.qr-generator-dialog {
  .el-dialog__header {
    border-bottom: 1px solid #ebeef5;
    padding: 15px 20px;
  }

  .el-dialog__title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
  }

  .dialog-content {
    display: flex;
    height: 500px;
  }

  .settings-panel {
    flex: 0 0 70%;
    padding: 15px 20px;
    border-right: 1px solid #f0f2f5;
    overflow-y: auto;
    border-bottom: 1px solid #e4e7ed;
    margin-bottom: 20px;
  }

  .preview-panel {
    flex: 0 0 30%;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }

  .tabs-header {
    display: flex;
    border-bottom: 1px solid #e4e7ed;
    margin-bottom: 20px;

    .tab-item {
      padding: 10px 20px;
      font-size: 16px;
      font-weight: 500;
      color: #909399;
      cursor: pointer;
      transition: all 0.3s;

      &.active {
        color: #409eff;
        border-bottom: 2px solid #409eff;
      }

      &:hover {
        color: #409eff;
      }
    }
  }

  .section {
    margin-bottom: 25px;

    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: #303133;
      margin-bottom: 15px;
    }
  }

  .type-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;

    .type-item {
      padding: 8px 16px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s;
      text-align: center;
      flex: 1;

      &.active {
        background-color: #409eff;
        color: white;
        border-color: #409eff;
      }

      &:hover {
        border-color: #409eff;
        color: #409eff;
      }
    }
  }

  .url-input,
  .wechat-input {
    display: flex;
    margin-bottom: 20px;

    .input-prepend {
      padding: 0 10px;
      line-height: 38px;
      font-size: 14px;
      color: #606266;
      border: 1px solid #dcdfe6;
      border-right: none;
      border-radius: 4px 0 0 4px;
      background-color: #f5f7fa;
    }

    .el-input {
      flex: 1;
    }
  }

  .options-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }

  .option-item {
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      transform: translateY(-3px);
    }

    &.active {
      .color-block,
      .bg-block,
      .logo-block {
        border: 2px solid #409eff;
        box-shadow: 0 2px 12px rgba(64, 158, 255, 0.3);
      }

      .option-label {
        color: #409eff;
        font-weight: 500;
      }
    }

    .color-block,
    .bg-block,
    .logo-block {
      width: 80px;
      height: 80px;
      margin: 0 auto 8px;
      border-radius: 4px;
      border: 1px solid #ebeef5;
      transition: all 0.3s;
    }

    .logo-block {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f5f7fa;

      &.add-logo {
        background-color: #f0f9eb;
        color: #67c23a;
      }
    }

    .option-label {
      font-size: 13px;
      color: #606266;
    }
  }

  .preview-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    text-align: center;
    margin-bottom: 15px;
  }



  .preview-tip {
    font-size: 13px;
    color: #909399;
    text-align: center;
    margin: 15px 0;
    line-height: 1.6;
  }

  .save-btn {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: 500;
    margin-top: 10px;
  }
}


.qr-style-container {
  display: flex;
  height: 70vh;
  overflow: hidden;

  ::v-deep .el-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;

    .el-tabs__content {
      flex: 1;
      overflow: auto;
    }
  }
}

.settings-panel {
  padding: 15px;
  height: 100%;
  overflow-y: auto;

  .setting-section {
    margin-bottom: 25px;

    .section-header {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ebeef5;
      color: #303133;
      font-size: 16px;
      font-weight: 500;

      i {
        margin-right: 10px;
        font-size: 18px;
        color: #409EFF;
      }
    }

    .options-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
      gap: 12px;
    }
  }
}

.style-option {
  border: 1px solid #ebeef5;
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #ffffff;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    border-color: #c0c4cc;
  }

  &.active {
    border: 2px solid #409EFF;
    background-color: rgba(64, 158, 255, 0.08);
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
  }

  .color-block {
    width: 60px;
    height: 50px;
    margin: 0 auto 8px;
    border-radius: 4px;
  }

  .gradient-block {
    width: 60px;
    height: 50px;
    margin: 0 auto 8px;
    border-radius: 4px;
  }

  .option-label {
    font-size: 13px;
    text-align: center;
    color: #606266;
  }
}

.logo-placeholder {
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 6px;
}

.preview-panel {
  width: 300px;
  padding: 20px;
  border-left: 1px solid #ebeef5;

  .preview-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 20px;
    text-align: center;
  }

  .qr-preview {
    padding: 10px;
    width: 200px;
    height: 200px;
    margin: 0 auto 15px;
    position: relative;
    //overflow: hidden;


    background-color: #ffffff;
    border-radius: 10px;
    //padding: 25px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    color: #000000;


  }


}



::v-deep .qr-style-dialog {
  .el-dialog__header {
    padding: 20px 20px 15px;
    border-bottom: 1px solid #ebeef5;
  }

  .el-dialog__body {
    padding: 0;
    height: calc(100% - 60px);
  }

  .el-tabs__header {
    margin: 0 0 0 20px;
    padding-top: 5px;
  }

  .el-tabs__nav-wrap::after {
    height: 1px;
  }
}



#qrcode {
  position: absolute;
  z-index: 2;
}
</style>